<template>
    <div class="wechat-order-detail-reason-container">
        <!-- <div class="tip-container" v-if="info.orderStatus == 2">
      <div class="title">订单被关闭</div>
      <div class="content">当前订单已经被关闭了</div>
    </div> -->
        <div class="tip-container" v-if="info.orderStatus == 2">
            <div class="title">正在出票,预计5-40分钟</div>
            <div class="content">
                您可以退出此页面,可以下拉进行刷新,或者在订单页面重新进入当前页面，超时未出票请联系客服查询
            </div>
        </div>

        <div class="tip-containers" v-if="info.orderStatus == 10">
            <nut-swiper :init-page="page" ref="swiper" v-if="info?.ticketList.length">
                <nut-swiper-item v-for="(item, index) in info?.ticketList" :key="item.id"
                    v-if="info?.ticketList.length">
                    <div style="display: flex; justify-content: center; align-items: center">
                        <image :src="Qrcode(item)" v-if="info?.ticketList" style="width: 120px; height: 120px"
                            @click="handleClickImage(item)"></image>
                    </div>
                    <div class="page">
                        <div class="pagetext">
                            {{ index + 1 }} / {{ info?.ticketList.length }}
                        </div>
                    </div>
                    <div class="nut-swiper-item-text" :class="{ 'text-trough': status == 4 }" @click="copyTicketCode">
                        <div style="margin-left: 5px" v-if="item.ticketCode">
                            取票码: {{ item.ticketCode }}
                        </div>
                        <div style="margin-left: 5px" v-if="item.validateCode">
                            验证码:{{ item.validateCode }}
                        </div>
                    </div>
                </nut-swiper-item>
            </nut-swiper>
            <div class="nut-swiper-btns">
                <span class="nut-swiper-btns__left" @click="handlePrev">
                    <Left></Left>
                </span>
                <span class="nut-swiper-btns__left" @click="handleNext">
                    <Right></Right>
                </span>
            </div>
        </div>
        <div class="tip-container" v-if="info.orderStatus == 20">
            <div class="title">出票失败</div>
            <div class="content">亲！当前限价太低，请调整限价重新提交呢！</div>
        </div>
    </div>
</template>
<script setup>
import { ref, toRefs, onMounted, computed } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import { Left, Right } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";

const status = ref(3);
var swiperSelected = ref(0);
const swiper = ref(null);
const page = ref(0);
const props = defineProps({
    info: Object,
});
const Qrcode = computed(() => {
    return (item) => {
        let qrCodeData = item.ticketCode + item.validateCode;
        let textData = "";
        if (qrCodeData.indexOf("|") !== -1) {
            qrCodeData = qrCodeData.replace(/\|/g, "%257C");
        }
        return `https://qrcode.hlcode.cn/beautify/style/create?content=${qrCodeData}`;
    };
});
const { info } = toRefs(props);
const ticketInfo = ref([
    {
        id: 1,
        ticketCode: 41544545,
        ticketValidateCode: 454455454,
        TICKET: `https://qrcode.hlcode.cn/beautify/style/create?content=1`,
    },
    {
        id: 2,
        ticketCode: 41544545,
        ticketValidateCode: 454455454,
        TICKET: `https://qrcode.hlcode.cn/beautify/style/create?content=1`,
    },
]);
//页码
const handlePrev = () => {
    swiperSelected.value = swiper.value.activePagination;
    page.value = swiper.value.activePagination;
    setTimeout(() => {
        swiper.value.prev();
    }, 200);
};
//页码
const handleNext = () => {
    swiperSelected.value = swiper.value.activePagination;
    page.value = swiper.value.activePagination;
    setTimeout(() => {
        swiper.value.next();
    }, 200);
};
//点击图片二维码 放大显示的
const handleClickImage = (e) => {
    let qrCodeData = e.ticketCode + e.validateCode;
    let textData = "";
    if (qrCodeData.indexOf("|") !== -1) {
        qrCodeData = qrCodeData.replace(/\|/g, "%257C");
    }

    Taro.previewImage({
        current: `https://qrcode.hlcode.cn/beautify/style/create?content=${qrCodeData}`,
        urls: [
            `https://qrcode.hlcode.cn/beautify/style/create?content=${qrCodeData}`,
        ],
    });
};
onMounted(() => {
    //  if (info?.ticketList.length) {
    //   info?.ticketList.forEach((element) => {
    //     let qrCodeData = element.textInfo + element.oldTextYcode;
    //     let textData = "";
    //     if (qrCodeData.indexOf("|") !== -1) {
    //       qrCodeData = qrCodeData.replace(/\|/g, "%257C");
    //     }
    //     element.TICKET = `https://qrcode.hlcode.cn/beautify/style/create?content=${qrCodeData}`;
    //     Taro.hideLoading();
    //   });
    //   ticketInfo.value = voteDetail.data;
    // }
});
</script>
<style lang="scss">
.wechat-order-detail-reason-container {
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 10px;

    .tip-container {
        position: relative;

        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 28px;
            color: var(--primary-text-color);
            font-weight: 700;
        }

        .content {
            font-size: 24px;
            color: var(--secondary-text-color);
            margin-top: 15px;
        }

        .nut-swiper-btns {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            display: flex;
            justify-content: space-between;

            span {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                color: var(--secondary-text-color);
            }
        }

        .nut-swiper {
            margin-top: 50px;

            .nut-swiper-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding-right: 60px;

                .page {
                    font-size: 16px;
                    color: var(--primary-text-color);

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 20px;

                    .pagetext {
                        width: 100px;
                        padding: 5px;
                        border-radius: 10px;
                        text-align: center;

                        box-sizing: border-box;
                        background-color: #eee;
                    }
                }

                .nut-swiper-item-text {
                    font-size: 22px;
                    margin-top: 10px;
                    text-align: center;
                    color: var(--primary-text-color);
                    cursor: pointer;
                }
            }
        }
    }

    .tip-containers {
        position: relative;

        .nut-swiper-btns {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
            display: flex;
            justify-content: space-between;

            span {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20px;
                height: 20px;
                color: var(--secondary-text-color);
            }
        }

        .nut-swiper {
            margin-top: 50px;

            .nut-swiper-item {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                padding-right: 60px;

                .page {
                    font-size: 16px;
                    color: var(--primary-text-color);

                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-top: 20px;

                    .pagetext {
                        width: 100px;
                        padding: 5px;
                        border-radius: 10px;
                        text-align: center;

                        box-sizing: border-box;
                        background-color: #eee;
                    }
                }

                .nut-swiper-item-text {
                    font-size: 22px;
                    margin-top: 10px;
                    text-align: center;
                    color: var(--primary-text-color);
                    cursor: pointer;
                }
            }
        }
    }
}
</style>
